$i-tooltip-background: #a3a9b5 !default;
$i-tooltip-info: #fff !default;
$i-tooltip-background-active: $primary !default;

.i-tooltip {
  display: block;
  height: 16px;
  width: 16px;

  .i-tooltip-circle  {
    fill: $i-tooltip-background;
  }

  .i-tooltip-info  {
    fill: $i-tooltip-info;
  }

  &:hover {
    .i-tooltip-circle {
      fill: $i-tooltip-background-active;
    }
  }

  &.ds-inline {
    display: inline;
  }
}
